<template>
  <div class="advancedCtf">
    <assets-head :title="$t('高级认证')"></assets-head>
    <div
      class="flex items-center justify-center pt-46 pb-30"
      v-if="status != 0"
    >
      <img
        :src="
          require(`../../assets/image/certificationCenter/advStatus${status}.png`)
        "
        alt=""
        class="w-36 h-36"
      />
      <span class="ml-16 font-32 textColor">{{ fixState(status) }}</span>
    </div>
    <div
      class="textColor pl-30 pr-30 mt-30 pb-30 flex border-b-color"
      v-if="status === 3 && msg"
    >
      <span> {{ $t("reason") }}:</span>
      <span class="break-word ml-10"> {{ msg }}</span>
    </div>
    <div class="px-32 mt-30">
      <ExInput
        :label="$t('真实姓名')"
        :disabled="true"
        :clearBtn="false"
        :placeholderText="$t('请输入真实姓名')"
        v-model="name"
      />
      <ExInput
        :label="$t('工作地址')"
        :disabled="disabled()"
        :clearBtn="!disabled()"
        :placeholderText="$t('请输入您的工作地址（必填）')"
        v-model="address"
      />
      <ExInput
        :label="$t('家庭地址')"
        :disabled="disabled()"
        :clearBtn="!disabled()"
        :placeholderText="$t('请输入您的家庭地址（必填）')"
        v-model="familyAddress"
      />
    </div>
    <div class="diviLine h-16 mb-48"></div>
    <div class="px-32">
      <ExInput
        :label="$t('与本人关系')"
        :disabled="disabled()"
        :clearBtn="!disabled()"
        :placeholderText="$t('与本人关系（必填）')"
        v-model="relationMy"
      />
      <ExInput
        :label="$t('亲属姓名')"
        :disabled="disabled()"
        :clearBtn="!disabled()"
        :placeholderText="$t('请输入亲属姓名（必填）')"
        v-model="relativesName"
      />
      <ExInput
        :label="$t('亲属地址')"
        :disabled="disabled()"
        :clearBtn="!disabled()"
        :placeholderText="$t('请输入亲属地址（必填）')"
        v-model="relativesAddress"
      />
      <ExInput
        :label="$t('亲属电话')"
        :disabled="disabled()"
        :clearBtn="!disabled()"
        :placeholderText="$t('请输入亲属电话（必填）')"
        v-model="relativesPhone"
      />
      <div
        class="btnMain text-black font-34 py-26 rounded-lg text-center mt-60"
        @click="submit"
        v-if="status == 0 || status == 3"
      >
        <span v-if="status == 0">{{ $t("申请认证") }}</span>
        <span v-if="status == 3">{{ $t("重新申请") }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import ExInput from "@/components/ex-input";
import Axios from "@/API/userCenter";
export default {
  props: {},
  components: {
    assetsHead,
    ExInput,
  },
  data() {
    return {
      status: "",
      name: "",
      address: "",
      familyAddress: "",
      relationMy: "",
      relativesName: "",
      relativesAddress: "",
      relativesPhone: "",
      msg: "",
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    disabled() {
      // 是否禁用按钮
      return ![0, 3, ""].includes(this.status);
    },
    getInfo() {
      Axios.getKycHighLevel().then((res) => {
        this.status = res.data.status;
        this.msg = res.data.msg;
        this.name = res.data.name;
        this.address = res.data.work_place;
        this.familyAddress = res.data.home_place;
        this.relationMy = res.data.relatives_relation;
        this.relativesName = res.data.relatives_name;
        this.relativesAddress = res.data.relatives_place;
        this.relativesPhone = res.data.relatives_phone;
      });
    },
    fixState(status) {
      let str = "";
      if (status == 1) {
        str = this.$t("审核中");
      } else if (status == 2) {
        str = this.$t("通过认证");
      } else if (status == 3) {
        str = this.$t("认证失败");
      }
      return str;
    },
    submit() {
      if (this.address == "" || this.address == null) {
        this.$toast(this.$t("工作地址不能为空"));
        return false;
      }
      if (this.familyAddress == "" || this.familyAddress == null) {
        this.$toast(this.$t("家庭地址不能为空"));
        return false;
      }
      if (this.relationMy == "" || this.relationMy == null) {
        this.$toast(this.$t("与本人关系不能为空"));
        return false;
      }
      if (this.relativesName == "" || this.relativesName == null) {
        this.$toast(this.$t("亲属姓名不能为空"));
        return false;
      }
      if (this.relativesAddress == "" || this.relativesAddress == null) {
        this.$toast(this.$t("亲属地址不能为空"));
        return false;
      }
      if (this.relativesPhone == "" || this.relativesPhone == null) {
        this.$toast(this.$t("亲属电话不能为空"));
        return false;
      }
      Axios.kycHighLevelApply({
        work_place: this.address,
        home_place: this.familyAddress,
        relatives_relation: this.relationMy,
        relatives_name: this.relativesName,
        relatives_place: this.relativesAddress,
        relatives_phone: this.relativesPhone,
      })
        .then((res) => {
          this.$router.push({ path: "/verified", query: { type: "advanced" } });
          this.$toast(this.$t("申请成功"));
        })
        .catch((err) => {
          if (err.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (err.msg !== undefined) {
            this.$toast(this.$t(err.msg));
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.advancedCtf {
  width: 100%;
  box-sizing: border-box;
}

.break-word {
  word-wrap: break-word;
}
</style>